<template>
  <el-dropdown>
    <div class="MC_iconfont MC_icon-hujiaohuojieting call-btn"></div>
    <template #dropdown>
      <el-dropdown-menu style="max-height: 200px; overflow: auto">
        <template v-if="phoneData && phoneData.length">
          <el-dropdown-item v-for="(item, index) in phoneData" :key="index">
            {{ item.value }}
            <i class="MC_iconfont MC_icon-hujiaohuojieting"></i>
          </el-dropdown-item>
        </template>
        <template v-else>
          <el-dropdown-item> 暂无电话 </el-dropdown-item>
        </template>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script lang="ts">
import { defineComponent, reactive, watch, toRefs } from 'vue'

/**
 * 打电话按钮
 */
export default defineComponent({
  name: 'PhoneBtn',
  props: {
    data: {
      // 详情数据
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const state = reactive({
      phoneData: []
    })

    watch(
      () => props.data,
      (newVal) => {
        if (newVal && newVal.mobile && newVal.mobile.length) {
          state.phoneData = newVal.mobile.filter((v: any) => v.value)
        }
      },
      { deep: true }
    )

    return {
      ...toRefs(state)
    }
  }
})
</script>
<style lang="stylus" scoped>
.call-btn
  width 20px
  height 20px
  background var(--mc-success-color)
  color #fff !important
  border-radius 50%
  text-align center
  line-height 20px
  font-size 10px
.MC_icon-hujiaohuojieting
  color: var(--mc-success-color)
  margin-left 30px
</style>
